<template>
    <view class="container">
        <view class="list-cell  b-b"  hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">姓名</text>
            <input type="text"  placeholder="请输入收货人姓名" placeholder-style="color:#F76260" v-model="requestData.receiver_name">
        </view>
        <view class="list-cell  b-b"  hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">电话</text>
            <input type="number"  placeholder="请输入收货人联系方式" maxlength="11" placeholder-style="color:#F76260" v-model="requestData.receiver_phone">
        </view>

        <view class="list-cell  b-b"  hover-class="cell-hover" :hover-stay-time="50" @click="visible=true">
            <text class="cell-tit">地址</text>
            <picker @change="bindMultiPickerChange"  @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="array" mode ="multiSelector" range-key="name">
                <input type="text"  disabled="disabled" placeholder="请选择收货人地址" placeholder-style="color:#F76260" :value="showAddress">
            </picker>
        </view>


        <view class="list-cell  b-b"  hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">详细地址</text>
            <input type="text"  placeholder="具体到门牌号" placeholder-style="color:#F76260" v-model="requestData.receiver_address">
        </view>

        <view class="list-cell"  hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">设为默认地址</text>
            <radio-group @change="radioChange">
                <label class="radio"><radio value="1" checked="false" color="#fa436a"/>是</label>
                <label class="radio"><radio value="0" checked="true" color="#ccc"/>否</label>
            </radio-group>
        </view>

        <view class="list-cell m-t log-out-btn" @click="saveAddress">
            <text class="cell-tit">保存地址</text>
        </view>
    </view>
</template>
<script>
    import { address } from '../../common/config'

    export default {
        data(){
            return {
                multiIndex: [0, 0, 0],
                array: [[],[],[]],
                showAddress:'',
                requestData:{
                    receiver_name:'',
                    receiver_phone:'',
                    receiver_province:0,//省份id
                    receiver_city:0,//城市id
                    receiver_region:0,//地区id
                    receiver_address:'',//详细地址
                    is_default:0
                }
            }
        },
        onLoad(){
            this.getDistricts()
        },
        created() {
        },
        computed: {

        },
        methods: {
            async getDistricts(parent_id = 0) {
                await this.$api.MyRequest(address.GetDistricts.url, address.GetDistricts.method, {parent_id})
                    .then(res => {
                        this.array[0] = res;
                        this.array[1] = res[0]['children'] || [];
                        this.array[2] = res[0]['children']['children'] || [];
                        this.$forceUpdate();
                    })
                    .catch(err => {
                    })
            },
            bindMultiPickerColumnChange: function(e) {
                switch (e.detail.column) {
                    case 0:
                        this.array[1] = this.array[0][e.detail.value]['children'] || [];
                        if (this.array[1].length !== 0)
                            this.array[2] = this.array[1][0]['children'] || [];
                        else
                            this.array[2] = [];
                        break;
                    case 1:
                        this.array[2] = this.array[1][e.detail.value]['children'] || [];
                        break;
                    case 2:
                        break;
                }
                this.multiIndex[e.detail.column] =  e.detail.value;
                this.$forceUpdate();
            },
            bindMultiPickerChange:function(e){
                let address = '';
                console.log(this.array[0][e.detail.value[0]]);
                console.log(this.array[1][e.detail.value[1]]);
                console.log(this.array[2][e.detail.value[2]]);
                if (this.array[0][e.detail.value[0]]) {
                    address += this.array[0][e.detail.value[0]].name;
                    this.requestData.receiver_province = this.array[0][e.detail.value[0]].id;
                }
                if (this.array[1][e.detail.value[1]]) {
                    address += " "+ this.array[1][e.detail.value[1]].name;
                    this.requestData.receiver_city = this.array[1][e.detail.value[1]].id;
                }
                if (this.array[2][e.detail.value[2]]) {
                    address += " "+ this.array[2][e.detail.value[2]].name;
                    this.requestData.receiver_region = this.array[2][e.detail.value[2]].id;
                }
                this.showAddress = address;
                console.log(this.requestData);
            },
            radioChange: function(evt) {
                this.requestData.is_default = evt.detail.value;
            },
            async saveAddress() {
                if (!this.isPoneAvailable(this.requestData.receiver_phone)) {
                    this.msg('请输入有效的手机号码');
                    return;
                }
                if (this.requestData.receiver_name === '') {
                    this.msg('请输入收货人姓名');
                    return;
                }
                if (this.requestData.receiver_address === '') {
                    this.msg('请输入详细地址');
                    return;
                }
                if (this.showAddress === '') {
                    this.msg('请选择地址');
                    return;
                }
                let data = this.requestData;
                if (data.receiver_city === 0) {
                    delete data.receiver_city;
                }
                if (data.receiver_region === 0) {
                    delete data.receiver_region;
                }

                await this.$api.MyRequest(address.PostAddress.url, address.PostAddress.method, data)
                    .then((res) => {
                        this.msg('添加地址成功');
                        uni.navigateBack();
                    })
                    .catch((e) => {
                    })

            }

        },

    }
</script>
<style lang='scss'>
    page{
        background: #f5f5f5;
    }
    .list-cell{
        display:flex;
        align-items:baseline;
        padding: 20upx $page-row-spacing;
        line-height:60upx;
        position:relative;
        background: #fff;
        justify-content: center;
        &.log-out-btn{
            margin-top: 40upx;
            .cell-tit{
                color: $uni-color-primary;
                text-align: center;
                margin-right: 0;
            }
        }
        &.cell-hover{
            background:#fafafa;
        }
        &.b-b:after{
            left: 30upx;
        }
        &.m-t{
            margin-top: 16upx;
        }
        .cell-more{
            align-self: baseline;
            font-size:$font-lg;
            color:$font-color-light;
            margin-left:10upx;
        }
        .cell-tit{
            flex: 1;
            font-size: $font-base + 2upx;
            color: $font-color-dark;
            margin-right:10upx;
        }
        .cell-tip{
            font-size: $font-base;
            color: $font-color-light;
        }
        input{
            font-size: $font-lg;
        }
    }
</style>